<template>
  <div class="info positRel">
    <div class="banners">
      <div class="banner-head">
        <h6 class="name">资讯动态</h6>
        <div class="search-box">
          <Input
            width="50%"
            search
            enter-button
            placeholder="请输入"
            v-model="param.keyword"
            @on-search="getInformatList('pull')"
            @on-clear="getInformatList('pull')"
          />
        </div>
      </div>
    </div>
    <div class="mymain">
      <Tabs value="all" @on-click="changetype">
        <TabPane
          v-for="item in tabsArr"
          :key="item.name"
          :label="item.label"
          :name="item.name"
          :data="array1"
        >
          <div class="content">
            <div class="news-item" v-for="(v, i) in array1" :key="i">
              <div class="content-top" v-if="v.resourceType == 2">
                <div class="name" @click="goHealth(v)">{{ v.title }}</div>
                <div class="newsinfo">
                  <div>{{ v.createByName }}</div>
                  <div class="time">{{ v.auditTime }}</div>
                  <div>{{ v.numberOfComments }}评论</div>
                </div>
              </div>
              <video
                :src="v.details"
                v-if="v.resourceType == 2"
                height="435px"
                width="100%"
                :poster="v.coverPath"
                controls
              ></video>
              <div v-if="v.displayMode == 3 && v.resourceType == 1">
                <div class="big-title" @click="goHealth(v)">{{ v.title }}</div>
                <div class="newsinfo" style="margin-top: 10px">
                  <div>{{ v.createByName }}</div>
                  <div class="time">{{ v.auditTime }}</div>
                  <div>{{ v.numberOfComments }}评论</div>
                </div>
              </div>
              <div
                v-if="v.resourceType == 1 && v.displayMode == 1"
                :class="v.content == '' ? 'content-main2' : 'content-main'"
              >
                <img
                  :src="v.coverPath[0]"
                  alt=""
                  :class="v.content == '' ? 'bigImg' : 'smallImg'"
                />
                <div class="content-main-right">
                  <div class="content-top">
                    <div class="name" @click="goHealth(v)">{{ v.title }}</div>
                    <div class="newsinfo">
                      <div>{{ v.createByName }}</div>
                      <div class="time">{{ v.auditTime }}</div>
                      <div>{{ v.numberOfComments }}评论</div>
                    </div>
                  </div>
                  <!-- <div
                    class="text"
                    v-html="
                      v.details.length > 1000
                        ? v.details.substring(0, 1000) + '......'
                        : v.details
                    "
                  ></div> -->
                </div>
              </div>

              <!-- <div v-if="v.coverPath.length > 1">
                <div class="content-main">
                  <div v-for="(item, i) in v.coverPath" :key="i">
                    <img :src="item" alt="" class="imgs" />
                  </div>
                </div>
                <div
                  v-html="
                    v.details.length > 1000
                      ? v.details.substring(0, 1000) + '......'
                      : v.details
                  "
                ></div>
              </div> -->
            </div>

            <div class="more" v-if="lastPage" @click="addList">查看更多</div>
            <empty v-if="array1.length == 0" />
          </div>
        </TabPane>
      </Tabs>
    </div>
    <Footer class="footer" :top="75"></Footer>
  </div>
</template>
<script>
import Footer from "@/components/footer/my_footer.vue";
import * as getInformat from "@/api/informat.js";
export default {
  data() {
    return {
      // 推荐
      array1: [],
      // 请求参数
      total: "",
      param: {
        expertId: 0,
        keyword: "",
        page: 1,
        rows: 10,
        sortField: "",
        sortType: "",
        status: 0,
        type: null,
      },
      tabsArr: [
        {
          label: "推荐",
          name: "all",
        },
        {
          label: "政策法规",
          name: "1003001",
        },
        {
          label: "求职创业",
          name: "1003002",
        },
        {
          label: "运动处方",
          name: "1003003",
        },
        {
          label: "健康科普",
          name: "1003004",
        },
        {
          label: "其他",
          name: "1003005",
        },
      ],
      lastPage: false,
      pjListObj: {},
    };
  },
  components: {
    Footer,
  },
  mounted() {
    this.getInformatList('pull');
  },
  methods: {
    // 切换选项
    changetype(v) {
      this.param.type = v == "all" ? null : Number(v);
      this.param.page = 1;
      this.getInformatList("pull");
    },
    search() {
      this.param.page = 1;
      this.getInformatList("pull");
    },
    goinfo(item) {
      this.$router.push({ path: "informatInfo", query: { id: item.id } });
    },
    // 跳转健康科普
    goHealth(item) {
      // resourceType 2：视频  1:图文
      if (item.resourceType == 2) {
        this.$router.push({
          path: "healthScienceDetails",
          query: { id: item.id },
        });
      } else {
        this.$router.push({ path: "informatInfo", query: { id: item.id } });
      }
    },
    getInformatList(v) {
      getInformat
        .getList(this.param)
        .then((res) => {
          let list = res.result.rows;
          this.total = Number(res.result.total);
          list.map((v) => {
            v.coverPath = v.coverPath == null ? [] : v.coverPath.split(",");
          });
          if (v == "pull") {
            this.array1 = list;
          } else {
            this.array1 = this.array1.concat(list);
          }
          this.lastPage = this.array1.length < this.total;
        })
        .catch(() => {});
    },
    //查看更多
    addList() {
      if (this.param.rows < this.total) {
        this.param.page++;
        this.getInformatList("push");
        this.lastPage = true;
      } else {
        this.lastPage = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.info {
  font-family: Source Han Sans CN;

  .banners {
    width: 100%;
    height: calc(440 / 1920 * 100vw);
    background: url("../../assets/images/info_bg.png") no-repeat;
    background-size: 100% 100%;

    .banner-head {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      height: 90%;
      // height: calc(440 / 1920 * 100vw);
      font-size: 36px;
      color: #fff;
      .name {
        margin-bottom: calc(65 / 1920 * 100vw);
        font-size: calc(48 / 1920 * 100vw);
      }

      .search-box {
        height: calc(48 / 1920 * 100vw);
        width: calc(720 / 1920 * 100vw);
        input {
          width: 100%;
          height: 100%;
        }
      }
      .subTitle {
        font-size: 26px;
      }
    }
  }
  .mymain {
    background-color: #fff;
    width: calc(1400 / 1920 * 100vw);
    padding-top: calc(30 / 1920 * 100vw);
    margin: 0 auto;
    position: relative;
    top: calc(-50 / 1920 * 100vw);
    border-radius: calc(10 / 1920 * 100vw) calc(10 / 1920 * 100vw) 0 0;
    //修改
    .news-item {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #ececec;
      padding-bottom: calc(40 / 1920 * 100vw);
      margin-top: calc(60 / 1920 * 100vw);
      .content-top {
        font-size: calc(24 / 1920 * 100vw);
        color: #2c2c2c;
        .newsinfo {
          display: flex;
          font-size: calc(20 / 1920 * 100vw);
          color: #babbbc;
          margin-top: calc(32 / 1920 * 100vw);
          margin-bottom: calc(30 / 1920 * 100vw);
          .time {
            padding: 0 calc(13 / 1920 * 100vw);
            margin: 0 calc(13 / 1920 * 100vw);
            border-left: 1px solid #babbbc;
            border-right: 1px solid #babbbc;
          }
        }
      }
      .content-main {
        display: flex;
        .smallImg {
          width: calc(410 / 1920 * 100vw);
          height: calc(240 / 1920 * 100vw);
          border-radius: calc(10 / 1920 * 100vw);
          margin-right: calc(24 / 1920 * 100vw);
        }
        .bigImg {
          width: calc(1280 / 1920 * 100vw);
          height: calc(435 / 1920 * 100vw);
          border-radius: 10px;
          margin-top: calc(38 / 1920 * 100vw);
        }
        .imgs {
          width: calc(410 / 1920 * 100vw);
          height: calc(240 / 1920 * 100vw);
          border-radius: calc(10 / 1920 * 100vw);
          margin-right: calc(24 / 1920 * 100vw);
        }
        .content-main-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #2c2c2c;
          font-size: calc(18 / 1920 * 100vw);
          // max-width: 60%;
          overflow: hidden;
          // height: 400px;
          /*padding: calc(20 / 1920 * 100vw) calc(20 / 1920 * 100vw);*/
          img {
            width: 300px !important;
            height: 300px !important;
          }
        }
      }
      .newsinfo {
        display: flex;
        font-size: calc(20 / 1920 * 100vw);
        color: #babbbc;
        .time {
          padding: 0 calc(13 / 1920 * 100vw);
          margin: 0 calc(13 / 1920 * 100vw);
          border-left: 1px solid #babbbc;
          border-right: 1px solid #babbbc;
        }
      }
      .content-main2 {
        .smallImg {
          width: calc(410 / 1920 * 100vw);
          height: calc(240 / 1920 * 100vw);
          border-radius: calc(10 / 1920 * 100vw);
          margin-right: calc(24 / 1920 * 100vw);
        }
        .bigImg {
          width: calc(1280 / 1920 * 100vw);
          height: calc(435 / 1920 * 100vw);
          border-radius: 10px;
          // margin-top: calc(38 / 1920 * 100vw);
        }
        .newsinfo {
          display: flex;
          font-size: calc(20 / 1920 * 100vw);
          color: #babbbc;
          margin-top: calc(48 / 1920 * 100vw);
          .time {
            padding: 0 calc(13 / 1920 * 100vw);
            margin: 0 calc(13 / 1920 * 100vw);
            border-left: 1px solid #babbbc;
            border-right: 1px solid #babbbc;
          }
        }
      }
      .name {
        cursor: pointer;
      }
    }

    ::v-deep.ivu-tabs-bar {
      border: none;
    }
    ::v-deep.ivu-tabs-nav {
      width: 100%;
      display: flex;
      font-size: calc(26 / 1920 * 100vw);
      justify-content: space-between;
    }
    ::v-deep.ivu-tabs-ink-bar {
      display: none;
    }
    ::v-deep.ivu-tabs-tab-active {
      border-bottom: 3px solid #fd5151;
    }
    ::v-deep.ivu-tabs-tab-focused {
      border-bottom: 3px solid #fd5151;
    }
    .content {
      padding-left: calc(62 / 1920 * 100vw);
      padding-right: calc(62 / 1920 * 100vw);
      padding-bottom: calc(33 / 1920 * 100vw);
      padding-top: calc(84 / 1920 * 100vw);
      margin-top: calc(38 / 1920 * 100vw);
      background-color: #fff;
      border-radius: calc(10 / 1920 * 100vw);
      .content-item {
        padding-bottom: calc(40 / 1920 * 100vw);
        border-bottom: 1px solid #ececec;
        margin-top: calc(60 / 1920 * 100vw);
        .little-title {
          font-size: calc(24 / 1920 * 100vw);
          color: #2c2c2c;
        }
        img {
          width: calc(1280 / 1920 * 100vw);
          height: calc(435 / 1920 * 100vw);
          border-radius: 10px;
          margin-top: calc(38 / 1920 * 100vw);
        }

        .time {
          font-size: calc(20 / 1920 * 100vw);
          color: #babbbc;
          display: flex;
          margin-top: calc(32 / 1920 * 100vw);
          .time-upload {
            padding: 0 calc(15 / 1920 * 100vw);
            border-left: 1px solid #babbbc;
            border-right: 1px solid #babbbc;
            margin: 0 calc(15 / 1920 * 100vw);
          }
        }
        .little-content2 {
          margin-top: calc(54 / 1920 * 100vw);
          display: flex;
          img {
            width: calc(410 / 1920 * 100vw);
            height: calc(240 / 1920 * 100vw);
            border-radius: calc(10 / 1920 * 100vw);
            margin-right: calc(24 / 1920 * 100vw);
          }
        }
        .little-content {
          margin-top: calc(60 / 1920 * 100vw);
          display: flex;
          img {
            width: calc(410 / 1920 * 100vw);
            height: calc(240 / 1920 * 100vw);
            border-radius: calc(10 / 1920 * 100vw);
            margin-right: calc(24 / 1920 * 100vw);
          }
          .content-info {
            padding-top: calc(24 / 1920 * 100vw);
            padding-bottom: calc(19 / 1920 * 100vw);
            padding-left: calc(33 / 1920 * 100vw);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .content-text {
              font-size: calc(24 / 1920 * 100vw);
              color: #2c2c2c;
            }
          }
        }
      }
      .num4 {
        border-bottom: none;
      }
      .more {
        text-align: center;
        cursor: pointer;
        font-size: calc(24 / 1920 * 100vw);
        color: #babbbc;
        margin-top: calc(55 / 1920 * 100vw);
      }
    }
    .optionBtns {
      width: calc(44 / 1920 * 100vw);
      text-align: center;
      position: absolute;
      top: calc(130 / 1920 * 100vw);
      left: calc(44 / 1920 * 100vw);
      width: 31px;
      height: 11px;
      font-size: 14px;
      font-weight: 400;
      color: #2c2c2c;
      line-height: 24px;
      .items {
        .nun {
        }
      }
    }
    .article {
      // width: 1039px;
      width: calc(1039 / 1920 * 100vw);
      margin: 0 auto;
      // height: 163px;
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #2c2c2c;
    }
    .comment {
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      margin-top: calc(30 / 1920 * 100vw);
      display: flex;
      justify-content: space-between;
      padding: calc(30 / 1920 * 100vw) calc(60 / 1920 * 100vw);
      .commentBtn {
        width: calc(150 / 1920 * 100vw);
        height: calc(48 / 1920 * 100vw);
        line-height: calc(48 / 1920 * 100vw);
        background: #fd5151;
        border-radius: calc(5 / 1920 * 100vw);
      }
    }
    .addCom {
      width: calc(1280 / 1920 * 100vw);
      padding: calc(35 / 1920 * 100vw);
      margin: 0 auto;
      background: #f9f9f9;
      // background: pink;
      .title {
        font-size: 24px;
        font-weight: 500;
        color: #2c2c2c;
        margin-bottom: calc(25 / 1920 * 100vw);
      }
      .textarea {
        display: block;
        margin: 0 auto;
        width: calc(1210 / 1920 * 100vw);
        height: 200px;
        background: #ffffff;
        border: 1px solid #fff;
        outline: none;
      }
      .upload {
        width: calc(88 / 1920 * 100vw);
        height: calc(88 / 1920 * 100vw);
        padding: calc(15 / 1920 * 100vw);
        text-align: center;
        background: #ffffff;
        border: 1px solid #efefef;
        margin-top: calc(30 / 1920 * 100vw);
        .word {
          margin-top: calc(10 / 1920 * 100vw);
        }
      }
      .comfor {
        display: flex;
        justify-content: space-between;
        margin-bottom: calc(30 / 1920 * 100vw);
        .btnsGroup {
          display: flex;
          justify-content: right;
          text-align: center;
          line-height: calc(36 / 1920 * 100vw);
          .cancle {
            width: calc(70 / 1920 * 100vw);
            height: calc(36 / 1920 * 100vw);
            border: 1px solid #fd5151;
            color: #fd5151;
            border-radius: 4px;
            margin-right: calc(18 / 1920 * 100vw);
          }
          .cert {
            width: calc(70 / 1920 * 100vw);
            height: calc(36 / 1920 * 100vw);
            // height: 14px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: 400;
            color: #ffffff;
            background: #fd5151;
            // line-height: 40px;
          }
        }
      }
    }
    .remarks {
      width: calc(1280 / 1920 * 100vw);
      height: calc(450 / 1920 * 100vw);
      margin: 0 auto;
      &-items {
        padding: calc(35 / 1920 * 100vw);
        display: flex;
        justify-content: space-between;
        // border: 1px solid red;
        .portrait {
          display: flex;
          justify-content: start;
          align-items: center;
          .imgs {
            width: calc(60 / 1920 * 100vw);
            height: calc(60 / 1920 * 100vw);
            margin-right: calc(15 / 1920 * 100vw);
          }
          .perinfo {
            // width: 64px;
            // height: 16px;
            height: calc(60 / 1920 * 100vw);
            font-size: 16px;
            font-weight: 400;
            color: #070a0c;
            .nikename {
            }
            .time {
              // width: 61px;
              // height: 9px;
              margin-top: 20px;
              font-size: 12px;
              color: #cbcbcb;
            }
          }
        }
        .desc {
          // width: calc(60 / 1920 * 100vw);
          width: 70%;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #787878;
          line-height: 24px;
          // border: 1px solid red;
        }
        .option {
          display: flex;
          justify-self: start;
          align-items: center;
          &-items {
            // line-height: calc(20 / 1920 * 100vw);
            margin-left: calc(15 / 1920 * 100vw);
            display: flex;
            justify-content: start;
            align-items: center;
            .imgs {
              width: calc(14 / 1920 * 100vw);
              height: calc(14 / 1920 * 100vw);
              margin-right: calc(5 / 1920 * 100vw);
              cursor: pointer;
            }
            .nun {
              color: #9d9d9d;
              font-size: calc(14 / 1920 * 100vw);
              cursor: pointer;
            }
            .report {
              color: #9d9d9d;
              font-size: calc(14 / 1920 * 100vw);
              margin-left: calc(14 / 1920 * 100vw);
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
.big-title {
  color: #070a0c;
  font-size: 26px;
}
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
